$pwdcalc-score-background-color: #EEE;
$pwdcalc-weak-text-color: #CC3333;
$pwdcalc-fair-text-color: #F89406;
$pwdcalc-good-text-color: #339900;
$pwdcalc-ditionary-word-text-color: #CC3333;

$pwdcalc-gauge-step-width: 10px;
$pwdcalc-gauge-steps: 5;
$pwdcalc-gauge-width: $pwdcalc-gauge-step-width * $pwdcalc-gauge-steps;

.pwdcalc-input-group {
  display: flex;
  align-items: center;
}

.pwdcalc-form-control {
  box-sizing: border-box;
  padding-right: 2*$pwdcalc-gauge-step-width + $pwdcalc-gauge-width;
}

.pwdcalc-gauge {
  display: none;
  margin-left: -($pwdcalc-gauge-width + $pwdcalc-gauge-step-width);
  height: 10px;
  width: $pwdcalc-gauge-width;

  span, b {
    display: block;
    height: inherit;
  }

  span {
    background-color: $pwdcalc-score-background-color;
    width: inherit;

    b {
      width: 1px;
      background-color: $pwdcalc-good-text-color;
      content: "";
    }
  }

  &[data-strength="dictionary-word"] b {
    width: $pwdcalc-gauge-step-width * 5;
    background-color: darken($pwdcalc-ditionary-word-text-color, 5);
  }

  &[data-strength="weak"] b {
    width: $pwdcalc-gauge-step-width;
    background-color: darken($pwdcalc-weak-text-color, 5);
  }

  &[data-strength="fair"] b {
    width: $pwdcalc-gauge-step-width * 2;
    background-color: darken($pwdcalc-fair-text-color, 5);
  }

  &[data-strength="good"] b {
    width: $pwdcalc-gauge-step-width * 3;
  }

  &[data-strength="strong"] b {
    width: $pwdcalc-gauge-step-width * 4;
  }

  &[data-strength="very-strong"] b {
    width: $pwdcalc-gauge-step-width * 5;
  }
}

.pwdcalc-hints,
.password-help-block {
  display: none;
}

.pwdcalc-help-block[data-complexity="weak"] {
  color: $pwdcalc-weak-text-color;
}
.pwdcalc-help-block[data-complexity="fair"] {
  color: $pwdcalc-fair-text-color;
}
.pwdcalc-help-block[data-complexity="good"] {
  color: $pwdcalc-good-text-color;
}
.pwdcalc-help-block[data-complexity="strong"] {
  color: $pwdcalc-good-text-color;
}
.pwdcalc-help-block[data-complexity="very-strong"] {
  color: $pwdcalc-good-text-color;
}
.pwdcalc-help-block[data-complexity="dictionary-word"] {
  color: $pwdcalc-ditionary-word-text-color;
}
